<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
        <script type="text/javascript" src="../public/cdn/vue/2.6.10/vue.js"></script>
        <link rel="stylesheet" href="../public/cdn/element-ui/2.15.6/theme-chalk/index.css">
        <script src="../public/cdn/element-ui/2.15.6/index.js" charset="utf-8"></script>
    </head>

    <body>
        <div id="app">
            <h1>演示nprogress（要引入vue）</h1>
            <el-button type="primary" onclick="NProgress.start()">NProgress.start()</el-button>
            <el-button type="primary" onclick="NProgress.set(0.5)">NProgress.set(0.5)</el-button>
            <el-button type="primary" onclick="NProgress.done()">NProgress.done()</el-button>
        </div>
    </body>

    <script>
        const app = new Vue({
            el: '#app',
            methods: {
            }
        });
        // 不显示右上角螺旋加载提示
        NProgress.configure({ showSpinner: false })
    </script>

</html>
